<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>录播管理</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <style>
    #app .button a {
        text-decoration: none;
        color: aliceblue;
    }
    </style>
    <style type="text/css">
    .el-table th.el-table__cell>.cell {
        text-align: center !important;
    }
    </style>
</head>

<body>
    <!-- 录播管理 -->
    <div id="app">
        <div class="p-30">
            {{ csrf_field() }}
            <div class="button">
                <el-form :inline="true" :model="forminline">
                    <el-button type="primary" @click="increase()" icon="el-icon-plus">添加录播</el-button>
                    <!-- Function button left -->
                    <el-button type="primary" style="float:right;margin-bottom: 20px;" @click="searchput()"
                        type="primary">查&ensp;&ensp;询</el-button>
                    <el-input placeholder="请输入视频名称" prefix-icon="el-icon-search" v-model="forminline.videoName"
                        style="float:right;width:200px;margin-left:10px">
                    </el-input>
                </el-form>
            </div>

            <!-- Form Page -->
            <div class="fromPage">
                <el-table :header-cell-style="{ background: '#f1f2f9' }" :fit="true" ref="multipleSelection"
                    :data="indexData" tooltip-effect="dark" style="width: 100%" v-loading="loading">
                    <el-table-column prop="id" label="ID" show-overflow-tooltip width="120">
                    </el-table-column>
                    <el-table-column prop="videoName" label="视频名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="资源地址" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <a :href="scope.row.videoResources"
                                target="_blank">@{{scope.row.videoResources}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发布时间" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="userName" label="作&ensp;&ensp;者" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="type" label="视频分类" show-overflow-tooltip>
                        <el-table-column label="分&ensp;&ensp;类" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="scope.row.type == 1">培训视频</span>
                                <span v-if="scope.row.type == 2">法律法规</span>
                                <span v-else-if="scope.row.type == 3">标准规范</span>
                                <span v-else-if="scope.row.type == 4">培训课件</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column label="操&ensp;&ensp;作" show-overflow-tooltip width="180">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">
                                编&ensp;&ensp;辑</el-button>
                            <el-button type="danger" size="mini"
                                @click.native.prevent="deleteRow(scope.$index, scope.row)">删&ensp;&ensp;除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="block" style="margin-top:15px;">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </div>
            <!--编辑抽屉-->
            <el-drawer title="编辑课程：" :visible.sync="showDrawer" :close-on-click-modal="false" size="35%">
                <el-form :model="formData" status-icon ref="formData" label-width="110px" class="demo-formData">
                    <el-form-item label="token" prop="_token" style="width: 450px;display:none">
                        <el-input v-model="formData._token"></el-input>
                    </el-form-item>
                    <el-form-item label="视频名称：" prop="videoName" style="width: 450px;">
                        <el-input v-model="formData.videoName" @input="updateForce($event)"></el-input>
                    </el-form-item>
                    <el-form-item label="资源地址" prop="videoResources" style="width: 640px;">
                        <div class="upload-content">
                            <el-upload ref="uploadFile" drag action="/admin/upload/uploadAll?_token={{ csrf_token() }}"
                                :multiple="false" :limit="1" accept=".jpg, .png, .ppt, .xlsx, .doc, docx, .xls, .mp4"
                                :before-upload="beforeUpload" :on-success="uploadSuccess" :on-error="uploadError"
                                :on-exceed="uploadExceed">
                                <i class="el-icon-upload"></i>
                                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<!--                                <div class="el-upload__tip" slot="tip">不超过10M，支持文件格式有.jpg, .png, .ppt, .doc, docx, .xls
                                    .xlsx</div>-->
                            </el-upload>
                        </div>
                        <!--<div>@{{formData.videoResources}}</div>-->
                    </el-form-item>
                    <!-- <el-form-item label="视频类型" prop="type">
          <el-select v-model="formData.type" placeholder="视频类型" v-on:click.native="getciddata">
            <el-option v-for="(item, index) in formData.cidData" :key="index" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click.once="formValidate('formData')">提&ensp;&ensp;交</el-button>
                        <el-button @click="cancelForm" style="margin-left: 75px;">取&ensp;&ensp;消</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</body>
<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script>
new Vue({
    el: '#app',
    data: function() {
        return {
            formData: {
                id: '',
                videoName: '',
                videoResources: '',
                _token: '{{csrf_token()}}',
            },
            //抽屉相关
            showDrawer: false,
            loading: false,
            formLabelWidth: '80px',
            //控制loading加载
            loading: false,
            // select选中的值
            v: '',
            value: '',
            //select下拉框placeholder改变样式
            active: false,
            //表格左边分页
            menuLeftList: [],
            //编辑对话框显示与隐藏
            editDialogVisible: false,
            classify: [],
            indexData: {
                id: '',
                videoName: '',
                videoResources: '',
                createTime: '',
                userName: '',
                type: '',
            },
            forminline: {
                videoName: '',
            },
            multipleSelection: [],
            indexData: [], //题库列表数据
            loading: false,
            sels: [], //当前选框选中的值
            currentPage: 1, // 当前页码
            count: 10, // 总条数
            pageSize: 10, // 每页的数据条数
            cidData: [],
        }
    },
    computed: {
        // showStatus() {
        //   if (this.forminline.video_id) {
        //     return true
        //   }
        //   return false
        // },
    },
    created() {
        console.log('-------------->', '{{csrf_token()}}')
        this.getResults()
        this.getciddata()
        this.updateForce()
        this.shuxin()

    },
    updated() {
        //在数据更新的时候存进缓存

    },
    methods: {
        //对form表单进行强制更新操作，避免无法编辑表单的情况
        updateForce() {
            this.$forceUpdate();
        },
        //获取分类列表
        getciddata() {
            axios.post('/admin/video/status_all', {})
                .then(res => {
                    this.formData.cidData = res.data.data
                    //  console.log('请求成功' + res);
                    console.log('请求成功' + res.data.data);
                }).catch(error => {
                    console.log('请求失败：' + error);
                })
        },
        //表格取消按钮
        async cancelForm() {
            await this.$refs.uploadFile.clearFiles()
            this.loading = false;
            this.showDrawer = false;

        },
        //编辑按钮
        handleEdit(index, row) {
            this.showDrawer = true
            this.formData.id = row.id
            this.formData.videoName = row.videoName
            this.formData.videoResources = row.videoResources
            // this.formData.type = row.type
            this.updateForce()
        },
        //抽屉保存
        formValidate(formName) {
            let id = this.formData.id;
            let videoName = this.formData.videoName;
            let videoResources = this.formData.videoResources;
            // let type = this.formData.type;
            let _token = this.formData._token;
            axios.post('/admin/video/videosdo?type=' + 1, {
                    id: id,
                    videoName: videoName,
                    videoResources: videoResources,
                    _token: _token
                })
                .then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功！'
                        });
                        this.showDrawer = false;
                        this.getResults()
                        this.$refs.uploadFile.clearFiles()
                    } else {
                        this.$message({
                            type: 'info',
                            message: '保存失败！'
                        })
                    }
                })
        },
        //跳转添加
        increase() {
            window.open("{{ route('admin.examview.videoadd') }}", '_self')
        },
        //查询按钮
        searchput() {
            this.currentPage = 1;
            this.getResults()
            console.log(this.forminline.videoName)
        },
        // 查询按钮
        getResults() {
            this.loading = true
            axios.get('/admin/video/dataList?type=' + 1, {
                    params: {
                        limit: this.pageSize,
                        page: this.currentPage,
                        videoName: this.forminline.videoName
                    }
                })
                .then(res => {
                    console.log('请求成功：', res.data.data);
                    this.indexData = res.data.data;
                    this.count = res.data.count;
                    this.loading = false;
                    console.log(res.data)
                }).catch(error => {
                    console.log('请求失败：' + error);
                    this.loading = false;
                })
        },
        //删除
        deleteRow(index, rows) {
            this.$confirm('确认操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                axios.post('/admin/video/delete', {
                        id: rows.id
                    })
                    .then(res => {
                        this.getResults()
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 分页器功能
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pageSize = val;
            this.getResults();
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.getResults();
        },
        //  shuxin(){
        //   	location.reload()

        //  }

    }
})
</script>
<style scoped>
a {
    color: #409EFF;
    text-decoration: none;
}

.el-table .el-table__cell:first-child {
    text-align: center;
}
</style>

</html>